<!-- 上级单位组件 -->
<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '90%' }"
    >
      <van-nav-bar
        fixed
        safe-area-inset-top
        class="nav"
        title="客户"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-search
        placeholder="请输入客户名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      />
      <!-- height: calc(100% - 30px);overflow-y: auto; -->
      <div style="width: 100%;padding-top: 10px;">
        <van-list
        :immediate-check="false"
           v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoading"
        >
          <!--  @click="regionClick(item)" -->
          <div
            class="boxFormal"
            v-for="(item,index) in data"
            :key="index"
            @click="customerChoice(item)"
          >
            <div class="companyName" style="font-size:14px">
              {{ item.cCusName }}
            </div>
            <div class="code" style="font-size:14px">
              <div>客户编码:{{ item.cCusCode }}</div>
            </div>
            <!-- <div class="companyAddress" style="font-size:14px">
              {{ item.Address }}
            </div> -->
          </div>
        </van-list>
      </div>
      <!-- <div>
        <ul>
          <li
            class="ckbxcli"
            @click="customerChoice(item)"
            v-for="(item, index) in data"
            :key="index"
          >
            <p style="margin-top: 8px">
              <van-field v-model="item.cCusName" />
              <van-field label="客户编码:" v-model="item.cCusCode" />
            </p>
          </li>
        </ul>
      </div> -->
    </van-popup>
  </div>
</template>

<script>
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  NavBar,
  Field,
  Empty
} from "vant";

export default {
  components: {
    "van-nav-bar": NavBar,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-empty": Empty
  },
  data() {
    return {
      loading: false,
      finished: false,
      selectedRowKeys: [],
      queryParam: { cCusType: null },
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: "",
      pagination: {
        pageIndex: 1,
        pageRows: 10,
        Total: 0
      }
    };
  },
  async created() {
      this.onLoading()
  },
  methods: {
    onLoading() {
      this.loading = true; //防止第一页重复加载
      // 获取上级单位
      this.getDataList();
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      this.queryParam.cCusName = value;
      this.getDataList();
    },
    // 客户列表选择
    customerChoice(item) {
      console.log(item);
      this.$emit("customerChoice", item);
      // 选中客户数据列表后显示添加收件人按钮  调取子组件里的变量isAddButton
      this.show = false;
    },
    // 获取上级单位
    getDataList() {
      this.http
        .post("/CustomerManagement/CustomerInfo/GetDataListByMoreCondition", {
          PageIndex: this.pagination.pageIndex,
          PageRows: 10,
          SortField: "Id",
          SortType: "desc",
          Search: this.queryParam
        })
        .then(resJson => {
          if (resJson.Success) {
            // 赋值总条数
            this.pagination.Total = resJson.Total;
            if (resJson.Data.length == 0 || resJson.Data == null) {
              this.data=[]
              // 停止加载
              this.loading = false;
              // 数据全部加载完成
              this.finished = true;
            }
             // 上拉加载
            this.pagination.pageIndex++;
            // 有数据 赋值列表 加载状态结束
           this.data=this.data.concat(resJson.Data)
            this.loading = false;
            // 如果list长度大于等于总数据条数，数据全部加载完成
            if(this.data.length >= resJson.Data.Total){
              this.finished = true;//结束加载
              this.loading=false
            }


          } else {
            Toast.fail(resJson.Msg);
            // 停止加载
            this.loading = false;
            // 结束加载
            this.finished = true;
          }
        });
    },
    init() {
      this.show = true;
    },
    openForm() {
      this.init();
      // this.getDataList();
    }
  }
};
</script>

<style scoped>
/* #close {
  position: fixed;
  right: 0px;
  bottom: 0px;
  background: "#fff";
} */
/* .scrollBar {
  height: 550px;
  overflow: auto;
} */

.ckbxcli {
  border: 1px solid Gainsboro;
  /* width: 250px; */
  height: 150px;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  margin-top: 20px;
}
.nav {
  position: fixed !important;
  width: 100%;
}
.boxFormal {
  border-radius: 5px;
  border-radius: 5px;
  width: 91%;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 10px;
  border: 1px dotted rgb(97, 96, 96);
  margin: 10px;
}
</style>
